<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>临沂市消防监控系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/elementui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" href="../lib/css/bootstrop.css" />
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/roster.css">
    <script src="../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/uilt.config.js"></script>
    <script src="../../lib/js/uitl.js"></script>
    <script src="../lib/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="../css/mues_side.css">
    <script src="../lib/layui/layui.all.js"></script>
    <script src="../lib/js/bootstrap.min.js"></script>

</head>

<body>
<div id="cele">
    <el-container>
        <el-header >
            <el-row :gutter="20">
                <el-col :span="5">
                    <div class="header-bj header-left">
                        {{time}}
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="header-center">
                        <h3>消防联动预警平台</h3>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="header-right">
                        <div class="header-bj  header-text">
                           <!-- <p>{{FireManInfoModel.Fire_brigade_name}}</p>-->
                        </div>
                        <div class="header-bj  header-btn" @click="Quit">退出</div>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="220px"  style="margin-top: 10px;margin-left: 20px;">
                <el-row class="tac">
                    <el-col :span="24">
                        <div class="container-fluid">
                            <div class="row">
                                <div class=" main-left-bj background">
                                    <ul id="main-nav" class="nav nav-stacked" style="">
                                        <li>
                                            <a href="fire_main.html" class="nav-header collapsed">
                                                首页
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#jy" class="nav-header collapsed active" data-toggle="collapse">
                                                救援行动
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="jy" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                                                消防员
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="systemSetting" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="control_People.html">人员排版</a></li>
                                                <li><a href="roster.html">人员信息维护</a></li>
                                                <li><a href="#">行动统计</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#wz" class="nav-header collapsed" data-toggle="collapse">
                                                微站管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="wz" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="Smallservice.html">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#tz" class="nav-header collapsed" data-toggle="collapse">
                                                通知管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="tz" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">人员排版</a></li>
                                                <li><a href="#">人员信息维护</a></li>
                                                <li><a href="#">行动统计</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#xf" class="nav-header collapsed active" data-toggle="collapse">
                                                消防知识
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="xf" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#xt" class="nav-header collapsed active" data-toggle="collapse">
                                                系统管理
                                                <span class="pull-right glyphicon glyphicon-plus red-text"></span>
                                            </a>
                                            <ul id="xt" class="nav nav-list collapse secondmenu text-center" style="height: 0px;">
                                                <li><a href="#">历史行动</a></li>
                                                <li><a href="#">出警信息</a></li>
                                                <li><a href="#">应急预案</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="main-nr">
                    <div class="main-nr-bj background">
                        <div class=" ly-bigbg">
                            <p style="padding-top: 30px;margin: 0;text-align: right;"><button class="bgcolor" @click="goin('new')">新增</button></p>
                            <div style="padding: 20px;" id="lll">
                                <table cellpadding="0" cellspacing="0">
                                    <thead>
                                    <tr>
                                        <th>消防员姓名</th>
                                        <th>职务</th>
                                        <th>警衔</th>
                                        <th>专业岗位</th>
                                        <th>士兵证号</th>
                                        <th>通讯方式</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                        <tbody style="height: 100px">
                                        <tr v-for="(item,index) in peploeList">
                                            <td>
                                                <!--lookchat-->
                                                <span >{{item.Name}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.Duty}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.Police_rank}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.Profession_posts}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.Soldier_id}}</span>
                                            </td>
                                            <td>
                                                <span>{{item.Soldier_id}}</span>
                                            </td>
                                            <td>
                                                <button class="bgcolor" @click="goin(item.Soldier_id)">查看</button>
                                                <button class="bgcolor" @click="dowm(item.Soldier_id)">删除</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!--信息-->
                <div class="bg_9" v-show="flag">
                    <el-form ref="form" :model="form" label-width="120px">
                        <div class="col-md-6">
                            <el-form-item label="士兵证号">
                                <el-input v-model="form.Soldier_id" @blur="jiaoyan(form.SoldierId)"></el-input>
                            </el-form-item>
                            <el-form-item label="消防员名称">
                                <el-input v-model="form.Name"></el-input>
                            </el-form-item>
                            <el-form-item label="出生日期">
                                <el-input v-model="form.Birthday"></el-input>
                            </el-form-item>
                            <el-form-item label="入党时间">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.Politics_time" style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="入伍时间">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.Military_time" style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="警衔">
                                <el-input v-model="form.Police_rank"></el-input>
                            </el-form-item>
                            <el-form-item label="职务">
                                <el-input v-model="form.Duty"></el-input>
                            </el-form-item>
                            <el-form-item label="专业岗位">
                                <el-input v-model="form.Profession_posts"></el-input>
                            </el-form-item>
                            <el-form-item label="是否是普通士兵">
                                <el-select v-model="form.Is_normal" placeholder="请选择是否是普通士兵">
                                    <el-option label="是" value="true"></el-option>
                                    <el-option label="否" value="false"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="col-md-6">
                            <el-form-item label="民族">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="form.Nation"
                                        :fetch-suggestions="querySearch"
                                        placeholder="请输入内容"
                                        @select="handleSelect"
                                ></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="文化程度">
                                <el-select v-model="form.Degree" placeholder="请选择文化程度">
                                    <el-option label="初中" value="初中"></el-option>
                                    <el-option label="高中" value="高中"></el-option>
                                    <el-option label="大专" value="大专"></el-option>
                                    <el-option label="本科" value="本科"></el-option>
                                    <el-option label="研究生" value="研究生"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="政治面貌">
                                <el-select v-model="form.Politics_status" placeholder="请选择政治面貌">
                                    <el-option label="团员" value="团员"></el-option>
                                    <el-option label="党员" value="党员"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="通讯方式">
                                <el-input v-model="form.Contact"></el-input>
                            </el-form-item>
                            <el-form-item label="家庭住址">
                                <el-input v-model="form.Address"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号">
                                <el-input v-model="form.Id_number"></el-input>
                            </el-form-item>
                            <el-form-item label="是否是干部">
                                <el-select v-model="form.Is_leader" placeholder="请选择是否是干部">
                                    <el-option label="是" value="true"></el-option>
                                    <el-option label="否" value="false"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否是通讯员">
                                <el-select v-model="form.Is_contact" placeholder="请选择是否是通讯员">
                                    <el-option label="是" value="true"></el-option>
                                    <el-option label="否" value="false"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否是驾驶员">
                                <el-select v-model="form.Is_driver" placeholder="请选择是否是驾驶员">
                                    <el-option label="是" value="true"></el-option>
                                    <el-option label="否" value="false"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                    <p>
                        <a href="javascript:void(0);" class="ly_a"  @click="quxiao()">取消</a>
                        <a href="javascript:void(0);" class="ly_a" @click="InsertFireManInfoModel()">确定</a>
                        <a href="javascript:void(0);" class="ly_a" @click="updata()">更新信息</a>
                    </p>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>


<script src="../lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/elementui.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/config.js"></script>
<script src="../js/roster.js"></script>

<style>
    .el-icon-arrow-down:before {
        content: "\e62B";
        font-weight: 900;
        color: red;
    }
    .el-form-item__label{
        color: #FFF;
    }
    .el-icon-minus:before{
        content:"\e621";
        font-weight: 900;
        color: yellow;
    }
    .main-table table td {
        line-height: 30px;
        color: #fff;
    }
    .el-col.el-col-11{
        width: 100% !important;
    }
    .el-input__inner{
        line-height: 28px;
        height: 30px;
        background:rgba(0,0,0,0) ;
        width: 100% !important;
    }
    .bgcolor {
        color: #fff;
        border-radius: 100px;
        font-size: 12px;
        /* padding: 2px 10px; */
        display: inline;
        width: 80px;
        height: 24px;
        line-height: 20px;
        background: red;
        border: red;
    }
    table#tbody tr:nth-child(1) span{
        background: red!important;
    }
    table#tbody tr:nth-child(2) span{
        background: #BAC100!important;
    }
    .xiaofang{
        font-weight: 900;
        font-size: 16px;
        text-align: center;
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-select{
        width: 100%;
    }
    .inline-input{
        width: 100%;
    }
</style>
</html>